import React, { Component } from 'react'
import {AnimalItem} from '../../types/main'
import AniamlCss from './animal.module.css'
import {withRouter,RouteComponentProps} from 'react-router-dom'

//如果使用withRouter必须继承路由的RouteComponentProps接口
interface IProps extends RouteComponentProps{
    item:AnimalItem
}

class Animal extends Component <IProps>{
    render() {
        let {image,pet_name,pet_gender} = this.props.item;
        return (
            <dl className={AniamlCss.animal} onClick={() => {
                this.props.history.push('/detail/1')
                // this.props.history.push({pathname:'/detail',state:{item:this.props.item}})
            }}>
                <dt className={AniamlCss['animal-item']}>
                    <img className={AniamlCss.img} src={image} alt=""/>
                </dt>
                <dd>
                    <h4>我叫{pet_name} <span>{pet_gender===2 ? '女孩':'男孩'}</span></h4>
                    <div>
                        4岁
                    </div>
                </dd>
            </dl>
        )
    }
}

export default withRouter(Animal)
